<template>
  <el-dialog
  model-value="menuDialogVisible"
  title="分配权限"
  width="30%"
     @close="handleClose"
   >
     <el-form
         ref="formRef"
         :model="form"
         label-width="100px"
     >
     <!-- 使用el-tree组件显示树形结构的权限列表 -->  
      <!-- treeRef树形结构的引用 -->
      <!--treeData 树形结构的数据 -->  
      <!-- props树形结构的配置项 -->  
      <!--show-checkbox 显示复选框 --> 
      <!--check-strictly 父子节点选中状态不关联 --> 
       <el-tree
           ref="treeRef"
           :data="treeData"
           :props="defaultProps"
           show-checkbox
           :default-expand-all=true
           node-key="id"
           :check-strictly=true
       />
     </el-form>
     <template #footer>
       <span class="dialog-footer">
         <el-button type="primary" @click="handleConfirm">确认</el-button>
         <el-button  @click="handleClose">取消</el-button>
       </span>
     </template>
   </el-dialog>
  </template>
  <script setup>
  import {defineEmits, defineProps, ref, watch} from "vue";
  import requestUtil,{getServerUrl} from "@/util/request";
  import { ElMessage } from 'element-plus'
  // 树形结构的默认配置项
  const defaultProps = {
   children: 'children',
   label: 'name'
  }
   const props=defineProps(
       {
         id:{
           type:Number,
           default:-1,
           required:true
         },
         menuDialogVisible:{
           type:Boolean,
           default:false,
           required:true
         }
       }
   )
   //表单数据模型
 const form=ref({
   id:-1
  })
  //树形结构的引用
  const treeRef=ref(null)
  //树形结构的数据
  const treeData=ref([])
  //表单的引用
  const formRef=ref(null)
  const initFormData=async(id)=>{
    // 请求树形结构的权限列表 
   const res=await requestUtil.get("sys/menu/treeList");
   treeData.value=res.data.treeMenu;
   form.value.id=id;

  // 请求当前角色已分配的权限ID列表 
   const res2=await requestUtil.get("sys/role/menus/"+id);
   treeRef.value.setCheckedKeys(res2.data.menuIdList);// 设置已选中的权限  
  }
   watch(
       ()=>props.menuDialogVisible,
       ()=>{
         let id=props.id;
         console.log("id="+id)
         if(id!=-1){
           initFormData(id)
         }
       }
   )
   const emits=defineEmits(['update:modelValue','initRoleList'])
   const handleClose=()=>{
     emits('update:modelValue',false) // 更新对话框的显示状态为false  
   }
   // 确认分配权限的方法 
   const handleConfirm=()=>{
     formRef.value.validate(async(valid)=>{
       if(valid){
          var menuIds=treeRef.value.getCheckedKeys();
          let result=await requestUtil.post("sys/role/updateMenus/"+form.value.id,menuIds);// 请求更新角色权限 
          let data=result.data;
          if(data.code==200){
            ElMessage.success("执行成功！")
            emits("initRoleList")// 通知父组件重新加载角色列表 
            handleClose();
          }else{
            ElMessage.error(data.msg);
          }
       }else{
         console.log("fail")
       }
     })
   }
  </script>
  <style scoped>
  </style>
 